<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    
    function App(){
        return (
            <div>
               <h1>俺是父组件----</h1>  
               <Child getName={(name)=>{
                    console.log(name)
                    console.log("我是一个函数")
               }} />  
            </div>
        )
    }

    function Child(props){
        console.log(props)
        let name = '李四';
        return (
            <div>
            <h2>俺是子组件</h2>    
            <button onClick={()=>{
                props.getName(name)
            }}>向父组件传递参数</button>
            </div>
        )
    }
    /* 
    函数式组件，子组件向父组件传值：
    1.在父组件的子组件标签上绑定一个自定义属性，但自定义属性值必须是一个函数；
    2.在子组件中通过props调用父组件传递的函数，通过函数传参实现组件通信
    
    */
    ReactDOM.render(<App/>,document.getElementById("root"))
</script>
</html>